<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/stylew.css" />
		<style type="text/css">
			.picbox{width: 690px;height: 560px;background: #fff;padding:16px 20px;box-sizing: border-box;}
			.picbox h1{font-size: 24px;color: #666;}
			.picbox .picnav{overflow: hidden;margin-top: 14px;}
			.picbox .picnav a{display: block;float: left;width: 90px;height: 30px;text-align: center;line-height: 30px;box-sizing: border-box;font-size: 14px;color: #999;border: 1px solid #f2f2f2;border-radius: 2px;margin-right: 12px;margin-bottom: 14px;}
			.picbox .picnav a.on{background: #ff8800;border-color: #ff8800;color: #fff;}
			.picbox .picnav a:nth-of-type(6n+6){margin-right: 0;}
			.outcontainer{padding: 15px 10px;position: relative;background: #efefef;}
			.incontainer{margin: 0 42px;overflow: hidden;}
			.incontainer .swiper-slide{width: 525px;height: 350px;}
			.incontainer .swiper-slide img{width: 100%;height: 100%;}
			.gallery-thumbs .swiper-slide{background: rgba(0,0,0,.3);color: #fff;font-size: 16px;padding: 8px 20px;box-sizing: border-box;}
			.swiper-button-prev{background: url(../images/leftbtn.png);width: 26px;height: 48px;}
			.swiper-button-next{background: url(../images/rightbtn.png);width: 26px;height: 48px;}

		</style>
	</head>

	<body>
		<div class="picbox">
			<h1>房源图片</h1>
			<div class="picnav">
				<a href="javascript:;" class="on">主卧(2)</a>
				<a href="javascript:;">阳台(2)</a>
				<a href="javascript:;">阳台(2)</a>
				<a href="javascript:;">厨房(2)</a>
				<a href="javascript:;">卫生间(2)</a>
				<a href="javascript:;">客厅(2)</a>
			</div>
			<div class="picwrap">
				<div class="outcontainer">
					<div class="incontainer">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><img src="images/pic.jpg" /></div>
							<div class="swiper-slide"><img src="images/pic.jpg" /></div>
							<div class="swiper-slide"><img src="images/pic.jpg" /></div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
				<div class="swiper-container gallery-thumbs">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<p>客厅</p>
							<p>图片描述：</p>
						</div>
						<div class="swiper-slide">
							<p>客厅</p>
							<p>图片描述：</p>
						</div>
						<div class="swiper-slide">
							<p>客厅</p>
							<p>图片描述：</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript">
			var galleryTop = new Swiper('.incontainer', {
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
			var galleryThumbs = new Swiper('.gallery-thumbs', {
			});
			galleryTop.controller.control = galleryThumbs;
			galleryThumbs.controller.control = galleryTop;
			
			//点击选择
			$('.picbox .picnav a').click(function(){
				$('.picbox .picnav a').removeClass('on');
				$(this).addClass('on');
			});
		</script>
	</body>

</html>